import React, { useState } from 'react';

import { Input } from 'web-component';
import './demo1.less';

export default () => {
  const [value, setValue] = useState('');
  const [visible, setVisible] = useState(false);
  return (
    <>
      <Input
        placeholder="请输入内容"
        value={value}
        onChange={(val) => {
          setValue(val);
        }}
      />

      <Input placeholder="请输入内容" clearable />

      <Input
        placeholder="请输入验证码"
        style={{ '--text-align': 'right' }}
        clearable
      />

      <Input placeholder="请输入内容" value="只读模式的输入框" readOnly />

      <Input placeholder="请输入内容" value="被禁用的输入框" disabled />

      <div className={'password'}>
        <Input
          className={'input'}
          placeholder="请输入密码"
          type={visible ? 'text' : 'password'}
        />
      </div>
    </>
  );
};
